<template>
	<div class="product_con">
		<el-row>
			<el-col class="title-col" :span="24"
				><div class="grid-content bg-purple-dark product-title">
					<div><span class="iconfont">&#xe618;</span>商品类型数据列表</div>
					<el-button type="primary" @click="addFun">添加</el-button>
				</div></el-col
			>
		</el-row>
		<el-table
			:data="attrList"
			class="attrList"
			border
			style="width: 100%;"
			align="center"
		>
			<el-table-column prop="id" label="编号"> </el-table-column>
			<el-table-column prop="name" label="分类名称" align="center">
			</el-table-column>
			<el-table-column prop="attribute_count" label="属性数量" align="center">
			</el-table-column>
			<el-table-column prop="param_count" label="参数数量" align="center">
			</el-table-column>
			<el-table-column label="操作" width="180px" align="center">
				<template slot-scope="scope">
					<el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
					<el-button
						size="mini"
						type="danger"
						@click="handleDelete(scope.row.id)"
						>删除</el-button
					>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
			:current-page="listQuery.pageNum"
			:page-sizes="[5, 10, 15, 20]"
			:page-size="listQuery.pageSize"
			layout="total, sizes, prev, pager, next, jumper"
			:total="total"
		>
		</el-pagination>
	</div>
</template>
<script>
import {
	fetchProductAttr,
	addProductAttr,
	updateProductAttr,
	deleteProductAttr
} from "@/api/product";
export default {
	name: "productAttr",
	data: function() {
		return {
			attrList: [],
			listQuery: {
				pageSize: 10, //一页10条数据
				pageNum: 1, //当前页
				id: null,
				attribute_count: 0,
				param_count: 0,
				name: "",
			},
			total: 0, //总数量
			rules: {
				name: [{ required: true, message: "请输入商品分类", trigger: "blur" }],
			},
		};
	},
	methods: {
		async getProductAttr() {
			const res = await fetchProductAttr(this.listQuery);
			this.attrList = res.data;
			// console.log(res);
			this.total = res.total;
		},
		addFun() {
			this.$prompt("类型名称", "添加类型", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				inputValidator:
					'{ required: true, message: "请输入商品类型", trigger: "blur" }',
			})
				.then(({ value }) => {
					this.listQuery.name = value;
					console.log(this.listQuery);
					addProductAttr({name:this.listQuery.name}).then((res) => {
						if (res.type == "success") {
							this.$message({
								type: "success",
								message: "商品修改成功: " + this.listQuery.name,
							});
							this.getProductAttr();
						}
					});
				})
				.catch(() => {
					this.$message({
						type: "info",
						message: "取消输入",
					});
				});
		},
		//5.修改每页显示的条数
		handleSizeChange(val) {
			console.log("修改每页显示的条数 触发了", val);
			this.listQuery.pageSize = val;
			this.listQuery.pageNum = 1;
			//重新获取数据
			this.getProductAttr();
		},
		//6.修改当前页的页码
		handleCurrentChange(val) {
			console.log("修改当前页的页码 触发了", val);
			this.listQuery.pageNum = val;
			this.getProductAttr();
		},
		handleEdit(val) {
			console.log(val);
			this.listQuery.id = val.id;
			this.listQuery.name = val.name;
			this.$prompt("类型名称", "编辑类型", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				inputValidator:
					'{ required: true, message: "请输入商品类型", trigger: "blur" }',
				inputValue: this.listQuery.name,
			})
				.then(({ value }) => {
					this.listQuery.name = value;
					console.log(this.listQuery.name);
					updateProductAttr({id:this.listQuery.id,name:this.listQuery.name}).then((res) => {
						if (res.type == "success") {
							this.$message({
								type: "success",
								message: "商品修改成功: " + this.listQuery.name,
							});
							this.getProductAttr();
						}
					});
				})
				.catch(() => {
					this.$message({
						type: "info",
						message: "取消输入",
					});
				});
		},
		handleDelete(id) {
			console.log(id);
			this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
			})
				.then(() => {
					deleteProductAttr({ id: id }).then((res) => {
						console.log("删好了");
						if (res.type == "success") {
							this.$message({
								type: "success",
								message: "删除成功!",
							});
							this.getProductAttr();
						}
					});
				})
				.catch(() => {
					this.$message({
						type: "info",
						message: "已取消删除",
					});
				});
		},
	},
	mounted() {
		this.getProductAttr();
	},
};
</script>
<style lang="scss" scoped>
.product_con {
	margin: 10px;
	.product-title {
		display: flex;
		justify-content: space-between;
		border: 1px solid #ebeef5;
		height: 40x;
		line-height: 40px;
		padding: 10px;
	}
}
</style>
